<template>
	<view class="seckill">
		<view class="header">
			<!-- #ifdef H5 -->
			<image class="back" src="../../static/images/back_icon.png" mode="scaleToFill"></image>
			<!-- #endif -->
			<image class="title" src="../../static/images/miaosha.png" mode="scaleToFill"></image>
		</view>
		<view class="seckillBanner">
			<image src="../../static/images/seckillBanner.png" mode="scaleToFill"></image>
		</view>
		<view class="nav" v-bind:class="{fix:isfixed}">
			<scroll-view class="scroll-view_H" scroll-x="true"  :scroll-left="scrollLeft" >
				<view class="navBar" @tap="changeActive(item,index)" v-for="(item,index) in timeList" :key="index" v-bind:class="{active:current == index}" >
					<view class="time">
						{{item.activityName}}
					</view>
					<view class="status">
						<text v-if="item.isBegin == 0">已结束</text>
						<text v-if="item.isBegin == 1">抢购中</text>
						<text v-if="item.isBegin == 2">未开始</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="fixBox" v-if="isfixed">
			
		</view>
		
		<view class="infoList">
				<view class="uni-list">
					<view class="uni-list-cell"  v-for="(item,index) in commodityList" :key="index" @tap="goInfo(item)">
						<view class="leftPic">
							<image :src="item.mainImg.split(',')[0]" lazy-load="true" mode="scaleToFill"></image>
						</view>
						<view class="rightInfo">
							<view class="title">
								{{item.productName}}
							</view>
							<view class="price">
								￥<text>{{item.activityPrice}}</text>  <text class="oldprice">￥{{item.price}}</text>
							</view>
							<view class="sale" v-if="isBegin != 2">
								已售{{parseInt(item.activitySell/(item.activitySell+item.activityStore)*100)}}% <progress :percent="item.activitySell/(item.activitySell+item.activityStore)*100" stroke-width="8" activeColor="#F77256" backgroundColor="#fff" />
							</view>
							<view class="status done" v-if="isBegin == 0">
								已结束
							</view>
							<view v-if="isBegin == 1">
								<view class="status ready" v-if="item.activityStore> 0">
								马上抢
								</view>
								<view class="status sellOut" v-if="item.activityStore == 0">
									已售罄
								</view>
							</view>
							
							<view v-if="isBegin ==2">
								<view class="status unBegin" v-if="item.isRemind == 0"   @tap.stop="setRemind(item)">
									提醒我
								</view>
								<view class="status setRemind" v-if="item.isRemind == 1"  @tap.stop="cancelRemind(item)">
									取消提醒
								</view>
								<view class="remind">
									{{item.remindNum}}人已设置提醒
								</view>
							</view>
							
							
						</view>
					</view>
				<view class="loadStatusText">
					{{loadStatusText}}
				</view>
				</view>
			            
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				current:0,
				timeList:[],
				activityId:"",
				commodityList:[],
				pageNum:1,
				loadStatusText: '加载中...',
				isBegin:0,
				isfixed:false,
				hour:"00",
				min:"00",
				sec:"00",
				time:"",
				timedesection:"距结束还有",
				timer:"",
				scrollLeft:0
			}
		},
		onLoad() {
			this.getTimeList()
		},
		onShow() {
			
		},
		onPageScroll(e){
			if(e.scrollTop >= 230){
				this.isfixed = true;
			}else{
				this.isfixed = false;
			}
		},
		onReachBottom() {
			this.getdataList()
		},
		methods:{
			
			getTimeList(){
				let data  = {
					  "pageNum": 0,
					  "pageSize": 0,
				}
				this.$http.post(this.$http.baseUrl + '/api/v1.0/activity/pageGetTotalActivity',data,res=>{
					this.timeList = res.data.data;
					for(let i = 0;i<this.timeList.length;i++){
						if(this.timeList[i].isBegin == 1){
							// console.log(this.timeList[i])
							this.current = i;
							this.activityId = this.timeList[i].activityId;
							this.isBegin =1
							this.scrollLeft = (i*165 - 330)/2
							break;
						}else{
							this.isBegin =  this.timeList[i].isBegin
							this.current = this.timeList.length -1;
							this.activityId = this.timeList[this.timeList.length -1].activityId;
					
						}
					}
					this.getdataList()
				})
			},
			getTime(time){
				console.log(time)
				this.timer = setInterval(()=>{
					time--
					if(time > 60) {//如果秒数大于60，将秒数转换成整数
							//获取分钟，除以60取整数，得到整数分钟
							this.min = parseInt(time / 60);
							//获取秒数，秒数取佘，得到整数秒数
							this.sec = parseInt(time % 60)<10 ? "0"+ (parseInt(time % 60).toString()) : parseInt(time % 60);
							//如果分钟大于60，将分钟转换成小时
							if(this.min > 60) {
								//获取小时，获取分钟除以60，得到整数小时
								this.hour = parseInt(this.min / 60) < 10 ? '0' + (parseInt(this.min / 60).toString()): parseInt(this.min / 60) ;
								//获取小时后取佘的分，获取分钟除以60取佘的分
								this.min = parseInt(this.min % 60) <10 ? "0" +  (parseInt(this.min % 60).toString()) : parseInt(this.min % 60) ;
							}
					}else{
						
					}
					if(time == 0){
						
					}
				},1000)
			},
			changeActive(item,num){
				
				this.commodityList = []
				this.activityId = item.activityId
				this.pageNum = 1;
				Promise.all([this.getdataList()]).then(res=>{
					this.current = num;
					this.isBegin = item.isBegin;
				})
				
			},
			getdataList(){
				this.loadStatusText = "加载中.."
				let data = {
					"activityId": this.activityId,
					"pageNum": this.pageNum,
					"pageSize": 10,
				}
				this.$http.post(this.$http.baseUrl + '/api/v1.0/activity/getActivityProduct',data,res=>{
					if(res.data.status == '000000'){
						this.loadStatusText = "加载完成"
						this.commodityList = this.commodityList.concat(res.data.data.list)
						this.pageNum++;
						if(res.data.data.isLastPage == true){
							this.loadStatusText = "已加载全部"
						}
					}
				})
			},
			goInfo(item){
				if(this.isBegin == 0){
					uni.navigateTo({
						url:'/pages/details/details?id='+item.productId
					})
					return
				}
				if(this.isBegin == 1 && item.activityStore == 0){
					uni.navigateTo({
						url:'/pages/details/details?id='+item.productId
					})
					return
				}else{
					uni.navigateTo({
						url:'/pages/details/seckillDetails?productId=' 
						+item.productId +'&price='+item.activityPrice
						+'&activityId='+item.activityId
						+'&Id='+item.id
					}) 
				}
				
			},
			//设置提醒
			setRemind(item){
				// //#ifdef MP-WEIXIN
				// 	wx.requestSubscribeMessage({
				// 	  tmplIds: [''],
				// 	  success (res) { }
				// 	})
				// //#endif
				let data = {
					activityId:item.activityId,
					productId:item.productId
				}
				this.$http.post('/api/v1.0/message/remindMe',data,res=>{
					console.log(res)
					if(res.data.status == '000000'){
						item.isRemind = 1;
						uni.showToast({
						    title: '将在开抢3分钟前提醒 请注意查看消息推送',
							icon:"none"
						});
					}else{
						uni.showToast({
						    title: '请稍后再试',
							icon:"none"
						});
					}
				})
			},
			cancelRemind(item){
				let data = {
					activityId:item.activityId,
					productId:item.productId
				}
				this.$http.post('/api/v1.0/message/cancelRemindMe',data,res=>{
					console.log(res)
					if(res.data.status == '000000'){
						item.isRemind = 0;
						uni.showToast({
						    title: '取消成功',
							icon:"none"
						});
					}else{
						uni.showToast({
						    title: '请稍后再试',
							icon:"none"
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.seckill{
		background-color: #f2f2f2;
		height: 100%;
		.header{
			// position: fixed;
			// top: 0;
			// left: 0;
			// right: 0;
			// width: 100%;
			text-align: center;
			background-color: #FF484A;
			height: 130upx;
			line-height: 130upx;
			/* #ifdef H5 */
			.back{
				float: left;
				width: 22upx;
				height: 22upx;
			}
			/*#endif*/
			.title{
				width: 203upx;
				height: 48upx;
			}
			
		}
		.seckillBanner{
			height: 323upx;
			image{
				width: 100%;
				height: 323upx;
			}
		}
		.nav{
			width: 100%;
			height: 120upx;
			overflow: hidden;
			.scroll-view_H{
				    white-space: nowrap;
				    width: 100%;
					.navBar{
						width: 165upx;
						height: 120upx;
						display: inline-block;
						border-right: 1upx solid #858181;
						background-color: #5A5A5A;
						color: #fff;
						text-align: center;
						padding-top: 15upx;
						box-sizing: border-box;
						.time{
							font-size: 40upx;
						}
						.status{
							font-size: 22upx;
						}
						&.active{
							background-color: #E21A1A;
							border-right: 1upx solid #E21A1A;
						}
					}
			}
			&.fix{
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
			}
			
		}
		.fixBox{
			height: 120upx;
			width: 100%;
		}
		.infoList{
			// background-color: #fff;
			width: 694upx;
			margin: 30upx auto;
			
				.uni-list-cell{
					background-color: #fff;
					display: flex;
					justify-content: space-between;
					padding: 20upx;
					margin-bottom: 20upx;
					border-radius: 20upx;
					.leftPic{
						width: 280upx;
						height: 280upx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.rightInfo{
						width: 337upx;
						margin-left: 22upx;
						.title{
							font-size: 30upx;
							color: #333;
							font-weight: 500;
							display: -webkit-box;
							overflow: hidden;
							white-space: normal!important;
							text-overflow: ellipsis;
							word-wrap: break-word; 
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}
						.price{
							color: #f63810;
							font-size: 24upx;
							margin-top: 20upx;
							text{
								font-size: 32upx;
								font-weight: bold;
							}
							.oldprice{
								font-size: 22upx;
								font-weight: normal;
								color: #b3b3b3;
								text-decoration: line-through;
								margin-left: 13upx;
							}
						}
						.sale{
							font-size: 24upx;
							color: #b3b3b3;
							margin-top: 10upx;
							progress{
								width: 166upx;
								display: inline-block;
								border-radius: 16upx !important;
								overflow: hidden;
								border: 1upx solid #F77256;
								margin-left: 20upx;
							}
						}
						.status{
							width: 254upx;
							height: 64upx;
							line-height: 64upx;
							font-size: 28upx;
							color: #fff;
							text-align: center;
							font-weight: bold;
							border-radius: 35upx;
							margin-top: 20upx;
							background-color: #747272;
							border: 1upx solid transparent;
							&.done{
								background-color: #747272;
							}
							&.ready{
								background-color: #F63810;
							}
							&.unBegin{
								background-color: #1AAB54;
							}
							&.sellOut{
								background-color: #747272;
							}
							&.setRemind{
								background-color: #fff;
								color: #4D4D4D;
								border: 1upx solid rgba(77,77,77,1);
							}
							
							
						}
						.remind{
							font-size: 24upx;
							color: #b3b3b3;
						}
					}
				}
			
		}
		.loadStatusText{
			font-size: 24upx;
			text-align: center;
			color: #999999;
			height: 100upx;
			line-height: 100upx;
		}
		.countdown{
			margin-top: 30upx;
			font-size: 24upx;
			color: #333;
			text-align: center;
			line-height: 40upx;
			text{
				display: inline-block;
				background-color: #4d4d4d;
				color: #fff;
				height: 40upx;
				width: 40upx;
				word-spacing: 20upx;
				margin: 0 5upx;
				&:first-child{
					margin-left: 10upx;
				}
			}
			
		}
	}
	
</style>
